import React from "react";
import { UserApp, UserProfile } from "../../../serve/interface";
import { Button, Space, Table, Popconfirm, message, Tooltip, Tag } from "antd";
import { DeleteOutlined, DownloadOutlined, EditOutlined, EyeOutlined, SettingOutlined } from "@ant-design/icons";
import { apis } from "../../apis";
import { ModalApp } from "./ModalApp";
import { Link } from "react-router";

interface AppListProps {
    profile?: UserProfile;
    onChange: (profile: UserProfile) => void;
}
export const AppList = (props: AppListProps) => {
    const { profile, onChange } = props;
    const deleteApp = (app: UserApp) => {
        apis.delete_app(app).then(res => {
            if (res.success) {
                message.success("删除成功");
                onChange(res.data);
            } else {
                message.error(res.message);
            }
        });
    };

    return <div className="container mx-auto p-4">
        <div className="pb-4">
            <ModalApp profile={profile} onChange={onChange} btn={<Button type="primary">新建站点</Button>} />
        </div>
        <Table
            size="small"
            rowKey="id"
            loading={!profile}
            dataSource={profile?.apps || []}
            columns={[
                { width: 60, dataIndex: "id", title: "#", render: (_, app, index) => 1 + index },
                {
                    width: 200, dataIndex: "title", title: "站点名称",
                    render: (_, app) => <div className="group">
                        <span>
                            <Tooltip title="编辑站点文档">
                                <Button type="link" size="small" href={`/app/${app.id}`} target="_blank">{app.title}</Button>
                            </Tooltip>
                        </span>

                    </div>,
                },
                { width: 350, dataIndex: "description", title: "站点描述" },
                { width: 150, dataIndex: "createdAt", title: "创建时间" },
                { width: 150, dataIndex: "updatedAt", title: "更新时间" },
                {
                    width: 64, dataIndex: "hideParent", title: "启用目录", align: "center",
                    render: (_, app) => app.hideParent ? <Tag color="green" bordered={false}>是</Tag> : <Tag bordered={false}>否</Tag>
                },
                {
                    width: 150, dataIndex: "op", title: <span className="pl-2">操作</span>,
                    render: (_, app) => <>
                        <Tooltip title="编辑站点文档">
                            <Link to={`/app/${app.id}`}>
                                <Button type="link" size="small" >
                                    <EditOutlined />
                                </Button>
                            </Link>
                        </Tooltip>
                        <Popconfirm title="确定删除吗？" onConfirm={() => deleteApp(app)}>
                            <Tooltip title="删除站点">
                                <Button type="link" size="small">
                                    <DeleteOutlined />
                                </Button>
                            </Tooltip>
                        </Popconfirm>
                        <ModalApp profile={profile} app={app} onChange={onChange} btn={
                            <Tooltip title="基本信息设置">
                                <Button type="link" size="small">
                                    <SettingOutlined />
                                </Button>
                            </Tooltip>
                        } />
                        <Tooltip title="预览">
                            <a href={`/preview/${app.id}/`} target="_blank">
                                <Button type="link" size="small">
                                    <EyeOutlined />
                                </Button>
                            </a>
                        </Tooltip>
                        <Tooltip title="导出">
                            <a href={`/export/${app.id}?t=${Date.now()}`} target="_blank">
                                <Button type="link" size="small">
                                    <DownloadOutlined />
                                </Button>
                            </a>
                        </Tooltip>
                    </>,
                }
            ]}
        />
    </div>;
};